<template>
  <div class="follow-list">
    <card>
      <Input v-model="query.openName" placeholder="请输入微信昵称" style="width: 150px"></Input>
      <Input v-model="query.realName" placeholder="请输入姓名" style="width: 150px"></Input>
      <Select v-model="query.status" style="width: 150px" placeholder="请选择关注状态">
        <Option :value="''">全部</Option>
        <Option :value="0">已关注</Option>
        <Option :value="1">未关注</Option>
      </Select>
      <Select v-model="query.bdStatus" style="width: 150px" placeholder="请选择绑定状态">
        <Option :value="''">全部</Option>
        <Option :value="0">已绑定</Option>
        <Option :value="1">未绑定</Option>
      </Select>
      <Button type="primary" @click="search()">查询</Button>
      <Button type="info" class="ml10" @click="synchronizeFollowList()" :loading="synchronizeing">同步关注人员</Button>
    </card>

    <Table
      :columns="columns"
      :data="list"
      size="large"
      no-data-text="该查询条件没有任何数据"
      class="mt20">
    </Table>

    <div class="m10 clearfix" v-if="page.total > 0">
      <div class="fr">
        <Page
          show-total
          :total="page.total"
          :current="query.currentPage"
          @on-change="onChangePage">
        </Page>
      </div>
    </div>

    <bind-modal :form="form" @submit="getList"></bind-modal>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import _ from 'underscore'
  import wechatApi from '@/api/wechat'
  import bindModal from './bind-modal'

  export default {
    name: 'follow-list',
    components: {
      bindModal
    },
    data () {
      return {
        query: {
          pkRcId: null,
          currentPage: 1,
          limit: 10
        },
        loading: false,
        synchronizeing: false,
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            width: 50,
            render: (h, params) => {
              return params.row._index + 1
            }
          },
          {
            title: '头像',
            width: 80,
            render: (h, params) => {
              let { row } = params
              return h('Avatar', {
                props: {
                  size: 'large',
                  src: row.wechatHeadImage
                }
              })
            }
          },
          {
            title: '微信昵称',
            key: 'openName'
          },
          {
            title: '姓名',
            key: 'realName'
          },
          {
            title: '关注状态',
            key: 'status',
            render: (h, params) => {
              let { row } = params
              return row.status === '0' ? '已关注' : '未关注'
            }
          },
          {
            title: '绑定状态',
            key: 'bdStatus',
            render: (h, params) => {
              let { row } = params
              return row.bdStatus === '0' ? '已绑定' : '未绑定'
            }
          },
          {
            title: '绑定时间',
            key: 'bdDate',
            render: (h, params) => {
              let { row } = params
              if (row.bdDate) {
                return moment(row.bdDate).format('YYYY-MM-DD HH:mm:ss')
              } else {
                return '-'
              }
            }
          },
          {
            title: '操作',
            width: 100,
            render: (h, params) => {
              let { row } = params
              if (row.bdStatus === '0') {
                return h('div', [
                  h('Button', {
                    props: {
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.onUnBind(params.row)
                      }
                    }
                  }, '取消绑定')
                ])
              } else {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.onBind(params.row)
                      }
                    }
                  }, '绑定')
                ])
              }
            }
          }
        ],
        list: [],
        form: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async synchronizeFollowList () {
        this.synchronizeing = true
        const { body } = await wechatApi.synchronizeFollowList()
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.synchronizeing = false
          this.$Message.info('数据同步成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      async getList () {
        this.loading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await wechatApi.followList(this.query)
        const { responseData } = body
        if (!this.$apiHelper.requestSuccessed(body.responseCode)) {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      onBind (row) {
        this.form.data = _.clone(row)
        this.form.visible = true
      },
      async onUnBind (row) {
        const { body } = await wechatApi.unbindWechat({
          openId: row.openId,
          pkUid: row.pkUid
        })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('取消绑定成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  .follow-list {}
</style>
